<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('文章类别')" />
</head>
<body class="gray-bg">
	<section class="content">
		<div class="box box-default" style="margin-bottom: 10px;">
			<div class="box-body">
				<div class="col-sm-12 search-collapse">
					<form id="formSearch">
						<div class="select-list">
							<ul>
								<li>
									类别名称：<input type="text" name="categoryName" id="categoryName" placeholder="请输入类别名称"/>
								</li>
								<li>
									类别状态：<select id="status" name="status">
												<option value="">请选择</option>
												<option value="1">有效</option>
												<option value="0">无效</option>
											</select>
								</li>
								<li>
									<a class="btn btn-primary btn-rounded btn-sm" id="btn_query"><i class="fa fa-search"></i>&nbsp;搜索</a>
									<a class="btn btn-warning btn-rounded btn-sm" id="btn_reset"><i class="fa fa-refresh"></i>&nbsp;重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>
		    </div>
	    </div>
	    <div class="jax-box-table">
	        <div id="toolbar">
                <button id="btn_add" type="button" class="btn btn-primary btn-sm" shiro:hasPermission="newsCategory:add">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
	        </div>
	        <table id="table"></table>
	    </div>
	</section>
	<th:block th:include="include :: footer" />
	<script>
    var editFlag = "[[${@permission.hasPerm('newsCategory:edit')}]]";
    var deleteFlag = "[[${@permission.hasPerm('newsCategory:delete')}]]";
    var columns=[
        {
            field: 'categoryName',
            title: '类别名称',
            align : "center"
        }, {
            field: 'status',
            title: '类别状态',
            align : "center",
            formatter : function(value, row, index) {
				if (row.status == 1) {
					return '<span style="color:green;">有效</span>';
				} else {
					return '<span style="color:red;">无效</span>';
				}
			}
        },
        {
            field: 'createTime',
            title: '创建时间',
            align : "center"
        },
        {
            field : 'operation',
            title : '操作',
            align : "center",
            formatter : function(value, row, index) {
            	var actions = [];
            	if(editFlag=="true") {
            		actions.push('<a class="btn btn-success btn-xs cursor-pointer" href="javascript:;" onclick="editCategory('+row.newsCategoryId+')"><i class="fa fa-edit"></i>编辑</a> ');	
            	}
            	if(deleteFlag=="true") {
            		actions.push('<a class="btn btn-danger btn-xs cursor-pointer" href="javascript:;" onclick="deleteCategory('+row.newsCategoryId+')"><i class="fa fa-remove"></i>删除</a> ');
            	}
                return actions.join('');
            }
        }
	];
  	//查询参数
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            categoryName: $("#categoryName").val(),
            status: $("#status").val(),
        };
        return temp;
    }
    var options={
        id:"#table",
        url: ctx + 'newsCategory/list',
        columns:columns,
        queryParams : queryParams,
    }
    $.table.initTable(options);
    /*搜索*/
    $("#btn_query").click(function(){
    	$.table.refreshTable();
    });
    /*重置*/
	$("#btn_reset").click(function() {
		$.common.clearForm("formSearch");
		$.table.refreshTable();
	});
    /*新增*/
    $("#btn_add").click(function(){
    	$.modal.dialog_open("新增文章类别", ctx + "newsCategory/add");
    });
    /*编辑*/
    function editCategory(newsCategoryId) {
    	$.modal.dialog_open("编辑文章类别", ctx + "newsCategory/edit?&newsCategoryId=" + newsCategoryId);
    }
    /*删除*/
    function deleteCategory(newsCategoryId) {
    	$.modal.confirm("确定删除该类别？",function () {
        	$.common.postAjax(
				ctx + "newsCategory/delete",
				{"newsCategoryId": newsCategoryId},
				function (data) {
					if (data.code == 0) {
						$.table.refreshTable();
						toastr.success(data.msg);
					} else {
						toastr.error(data.msg);
					}
				}
			)
        })
    }
	</script>
</body>
</html>